<template>
  <page class="me">
    <page-header>
      <x-header :left-options="{showBack: false}">我的</x-header>
    </page-header>
    <page-content :scroll="false">
      <section class="me-body">
        <div class="con-a">
          <div class="a-s">{{userInfo.name}}
            <div class="phone">绑定手机：{{userInfo.mobile}}</div>
          </div>
          <div class="a-s">
            <p>{{userInfo.company.name}}</p>
          </div>
        </div>

        <div class="con-b">
          <div style="padding-right: .5rem;padding-left: .5rem;">
            <router-link :to="{path:'/contact'}" class='contact'>
              <div class="con-left">
                <i class="iconfont icon--kefu" style="color: #008fe7;"></i>
                <p style="float: left;margin-left: .5rem;">联系我们</p>
                <span class="arrow">
                  <i class="material-icons right">chevron_right</i>
                </span>
              </div>
            </router-link>

            <!-- <router-link :to="{path:'/opinion'}" class='contact'>
              <div class="con-left">
                <i class="material-icons">call</i>
                <p style="float: left;margin-left: .5rem;">意见反馈</p>
                <span class="arrow">
                  <i class="material-icons right">chevron_right</i>
                </span>
              </div>
            </router-link> -->

            <router-link :to="{path:'/about'}" class="contact">
              <div class="con-left" style="border-bottom: none;">
                <i class="iconfont icon-hezuoguanxi" style="color: #fc992c;"></i>
                <p style="float: left;margin-left: .5rem;">关于我们</p>
                <span class="arrow">
                  <i class="material-icons right">chevron_right</i>
                </span>
              </div>
            </router-link>

            <!-- <div class="con-left" style="border-bottom: none;">
              <i class="iconfont icon-laba" style="color: #66a693;"></i>
              <p style="float: left;margin-left: .5rem;">接收推送信息</p>
              <mt-switch v-model="isopen" class='isopen'></mt-switch>
            </div> -->
          </div>

        </div>

        <div class="con-c">
          <div style="padding-right: .5rem;padding-left: .5rem;">
            <router-link :to="{path:'/modify'}" class='contact'>
              <div class="con-left">
                <i class="iconfont icon-anzhuangshigong" style="color: #ff9400;"></i>
                <p style="float: left;margin-left: .5rem;">修改密码</p>
                <span class="arrow">
                  <i class="material-icons right">chevron_right</i>
                </span>
              </div>
            </router-link>
            <router-link :to="{path:'/change'}" class='contact'>
              <div class="con-left">
                <i class="iconfont icon-dianhua-yuankuang" style="color: #008fe7;"></i>
                <p style="float: left;margin-left: .5rem;">更改绑定手机</p>
                <span class="arrow">
                  <i class="material-icons right">chevron_right</i>
                </span>
              </div>
            </router-link>

            <div class="con-left" style="border-bottom: none;" @click="signout">
              <i class="iconfont icon-cuowuguanbiquxiao-yuankuang" style="color: #ff4b3f;"></i>
              <p style="float: left;margin-left: .5rem;">退出</p>
              <span class="arrow">
                <i class="material-icons right">chevron_right</i>
              </span>
            </div>

          </div>
        </div>
      </section>
    </page-content>
    <page-footer>
      <x-footer></x-footer>
    </page-footer>
  </page>
</template>

<script>
import { XHeader } from 'vux'
import { mapGetters } from 'vuex'
import { MessageBox } from 'mint-ui'
import { user } from '@service'
import XFooter from '@components/common/Footer'

export default {
  name: 'Me',
  components: {
    XHeader,
    XFooter
  },
  computed: {
    ...mapGetters({
      userInfo: 'user/info',
      token: 'user/token'
    })
  },
  data () {
    return {
      info: {},
      isopen: true
    }
  },
  create () {
    this.loadData()
  },
  methods: {
    async loadData () {
      try {
        let userId = this.userInfo.id
        let token = this.token
        let data = await user.info({userId, token})
        this.info = data
        this.$store.dispatch('user/info', data)
      } catch (error) {
        console.log(error)
      }
    },
    signout () {
      MessageBox.confirm('请问您确定退出吗', '提示').then(aciton => {
        var router = this.$router
        router.push('sign')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.me {
  height: 100%;
  width: 100%;

  .right {
    color: #c7c7cc;
  }
  .fa {
    font-size: 1.5rem;
    line-height: 3rem !important;
    float: left;
  }
  .material-icons {
    font-size: 1.5rem;
    line-height: 3rem !important;
    float: left;
  }
  .iconfont {
    font-size: 1.5rem;
    line-height: 3rem !important;
    float: left;
  }

  .me-body {
    padding: 0 1rem;
  }

  .con-a {
    min-height: 6rem;
    background: #3b82cc;
    border-radius: 6px;
    margin-top: 0.5rem;
    font-size: 1rem;
    color: #fff;
  }

  .a-s {
    line-height: 2rem;
    height: 2rem;
    padding: 0.5rem;
  }
  .phone {
    float: right;
  }
  .con-b {
    height: 6rem;
    background: #fff;
    border-radius: 6px;
    margin-top: 1rem;
  }
  .con-left {
    height: 3rem;
    line-height: 3rem;
    border-bottom: 1px solid #ddd;
  }
  .arrow {
    float: right;
    line-height: 3rem;
  }
  .isopen {
    float: right;
    margin-top: 0.5rem;
  }
  .con-c {
    height: 9rem;
    background: #fff;
    border-radius: 6px;
    margin-top: 1rem;
  }
  .contact {
    color: #606063;
  }
}
</style>
